<template>
  <el-table :data="trainList" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div class="expend-content">
          <div
            v-for="i in 4"
            :key="i"
            style="width: 100px; background-color: transparent"
          ></div>
          <div class="money">
            {{
              props.row.seatClassList.filter(
                (item) => item.type === 0 || item.type === 12
              ).length
                ? "￥" +
                  props.row.seatClassList.filter(
                    (item) => item.type === 0 || item.type === 12
                  )[0].price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter((item) => item.type === 1).length
                ? "￥" +
                  props.row.seatClassList.filter((item) => item.type === 1)[0]
                    .price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter(
                (item) => item.type === 2 || item.type === 3
              ).length
                ? "￥" +
                  props.row.seatClassList.filter(
                    (item) => item.type === 2 || item.type === 3
                  )[0].price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter((item) => item.type === 10).length
                ? "￥" +
                  props.row.seatClassList.filter((item) => item.type === 10)[0]
                    .price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter((item) => item.type === 9).length
                ? "￥" +
                  props.row.seatClassList.filter((item) => item.type === 9)[0]
                    .price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter(
                (item) => item.type === 6 || item.type === 4
              ).length
                ? "￥" +
                  props.row.seatClassList.filter(
                    (item) => item.type === 6 || item.type === 4
                  )[0].price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter(
                (item) => item.type === 7 || item.type === 5
              ).length
                ? "￥" +
                  props.row.seatClassList.filter(
                    (item) => item.type === 7 || item.type === 5
                  )[0].price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter((item) => item.type === 11).length
                ? "￥" +
                  props.row.seatClassList.filter((item) => item.type === 11)[0]
                    .price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter((item) => item.type === 8).length
                ? "￥" +
                  props.row.seatClassList.filter((item) => item.type === 8)[0]
                    .price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter((item) => item.type === 13).length
                ? "￥" +
                  props.row.seatClassList.filter((item) => item.type === 13)[0]
                    .price
                : ""
            }}
          </div>
          <div class="money">
            {{
              props.row.seatClassList.filter((item) => item.type === 14).length
                ? "￥" +
                  props.row.seatClassList.filter((item) => item.type === 14)[0]
                    .price
                : ""
            }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="车次" width="100">
      <template #default="scope">
        <el-popover placement="right" trigger="click" width="500">
          <div class="my-custom-table">
            <el-table :data="stopoverStation" class="stopover-table">
              <el-table-column property="sequence" label="站序" />
              <el-table-column property="departure" label="站名" />
              <el-table-column property="arrivalTime" label="到站时间" />
              <el-table-column property="departureTime" label="出发时间" />
              <el-table-column property="stopoverTime" label="停留时间" />
            </el-table>
          </div>

          <template #reference>
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
              "
              @click="handleTrainStation(scope.row.trainId)"
            >
              <div style="color: rgba(0, 0, 0, 0.85); font-weight: 500">
                {{ scope.row.trainNumber }}
              </div>
              <div class="tag">
                <div
                  v-for="tag in scope.row.trainTags"
                  :key="tag"
                  class="tag-item"
                  :style="{
                    color: TRAIN_TAG.filter((item) => item.value === tag)[0]
                      ?.color,
                    border: `1px solid ${
                      TRAIN_TAG.filter((item) => item.value === tag)[0]?.color
                    }`,
                  }"
                >
                  {{ TRAIN_TAG.filter((item) => item.value === tag)[0]?.label }}
                </div>
              </div>
            </div>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column width="100">
      <template #header>
        <div style="display: flex; flex-direction: column">
          <span>出发站</span>
          <span>到达站</span>
        </div>
      </template>
      <template #default="scope">
        <div style="display: flex; flex-direction: column">
          <div style="color: black">
            <span
              style="
                padding: 2px 4px;
                background-color: rgb(204, 165, 103);
                color: rgb(255, 255, 255);
                border-radius: 4px;
                font-size: 10px;
                font-weight: bolder;
                margin-right: 2px;
                height: 19px;
                line-height: 15px;
              "
              >始</span
            >
            {{ scope.row.departure }}
          </div>
          <div style="color: black">
            <span
              v-if="scope.row.arrivalFlag"
              style="
                padding: 2px 4px;
                background-color: rgb(109, 167, 127);
                color: rgb(255, 255, 255);
                border-radius: 4px;
                font-size: 10px;
                font-weight: bolder;
                margin-right: 2px;
                height: 19px;
                line-height: 15px;
              "
              >终</span
            >
            <span
              v-else
              style="
                padding: 2px 4px;
                background-color: rgb(117, 151, 213);
                color: rgb(255, 255, 255);
                border-radius: 4px;
                font-size: 10px;
                font-weight: bolder;
                margin-right: 2px;
                height: 19px;
                line-height: 15px;
              "
              >过</span
            >
            {{ scope.row.arrival }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column width="100">
      <template #header>
        <div style="display: flex; flex-direction: column">
          <span>出发时间</span>
          <span>到达时间</span>
        </div>
      </template>
      <template #default="scope">
        <div style="display: flex; flex-direction: column; align-items: center">
          <span style="color: rgba(0, 0, 0, 0.85)">{{
            scope.row.departureTime
          }}</span>
          <span style="color: rgba(0, 0, 0, 0.85)">{{
            scope.row.arrivalTime
          }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="历时" width="100">
      <template #default="scope">
        <div
          style="
            display: flex;
            justify-content: center;
            color: rgba(0, 0, 0, 0.85);
          "
        >
          {{ scope.row.duration }}
        </div>
      </template>
    </el-table-column>
    <el-table-column width="100">
      <template #header>
        <div style="display: flex; flex-direction: column">
          <span>商务座</span>
          <span>特等座</span>
        </div>
      </template>
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter(
              (item) => item.type === 0 || item.type === 12
            ).length
          "
          style="color: black"
        >
          {{
            scope.row.seatClassList.filter(
              (item) => item.type === 0 || item.type === 12
            )[0].quantity
          }}
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column label="一等座" width="100">
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter((item) => item.type === 1).length
          "
          style="color: green"
        >
          有
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column width="100">
      <template #header>
        <div style="display: flex; flex-direction: column; align-items: center">
          <span>二等座</span>
          <span>二等包座</span>
        </div>
      </template>
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter(
              (item) => item.type === 2 || item.type === 3
            ).length
          "
          style="color: green"
        >
          有
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column label="动卧" width="100">
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter((item) => item.type === 10).length
          "
          style="color: green"
        >
          有
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column label="高级..." width="100">
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter((item) => item.type === 9).length
          "
          style="color: green"
        >
          有
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column width="100">
      <template #header>
        <div style="display: flex; flex-direction: column; align-items: center">
          <span>软卧</span>
          <span>一等卧</span>
        </div>
      </template>
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter(
              (item) => item.type === 4 || item.type === 6
            ).length
          "
        >
          <div
            v-if="
              scope.row.seatClassList.filter(
                (item) => item.type === 4 || item.type === 6
              )[0].quantity
            "
            style="color: green"
          >
            有
          </div>
          <div v-else>无</div>
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column width="100">
      <template #header>
        <div style="display: flex; flex-direction: column; align-items: center">
          <span>硬卧</span>
          <span>二等卧</span>
        </div>
      </template>
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter(
              (item) => item.type === 5 || item.type === 7
            ).length
          "
        >
          <div
            v-if="
              scope.row.seatClassList.filter(
                (item) => item.type === 5 || item.type === 7
              )[0].quantity
            "
            style="color: green"
          >
            有
          </div>
          <div v-else>无</div>
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column label="软座" width="100">
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter((item) => item.type === 11).length
          "
        >
          <div
            v-if="
              scope.row.seatClassList.filter((item) => item.type === 11)[0]
                .quantity
            "
            style="color: green"
          >
            有
          </div>
          <div v-else>无</div>
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column label="硬座" width="100">
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter((item) => item.type === 8).length
          "
        >
          <div
            v-if="
              scope.row.seatClassList.filter((item) => item.type === 8)[0]
                .quantity
            "
            style="color: green"
          >
            有
          </div>
          <div v-else>无</div>
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column label="无座" width="100">
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter((item) => item.type === 13).length
          "
        >
          <div
            v-if="
              scope.row.seatClassList.filter((item) => item.type === 13)[0]
                .quantity
            "
            style="color: green"
          >
            有
          </div>
          <div v-else>无</div>
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column label="其他" width="100">
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.filter((item) => item.type === 14).length
          "
        >
          <div
            v-if="
              scope.row.seatClassList.filter((item) => item.type === 14)[0]
                .quantity
            "
            style="color: green"
          >
            有
          </div>
          <div v-else>无</div>
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column label="备注">
      <template #default="scope">
        <div
          v-if="
            scope.row.seatClassList.reduce(
              (acc, item) => acc + item.quantity,
              0
            )
          "
        >
          <el-button type="primary" text>预定</el-button>
        </div>
        <div v-else>
          <el-button text disabled>预定</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { TRAIN_TAG } from "@/constants/index"
import { queryTrainStation } from "@/api/ticket"
defineProps({
  trainList: Array,
})
// 经停站
const stopoverStation = ref([])
// 经停站查询
const handleTrainStation = async (trainId) => {
  const resp = await queryTrainStation(trainId)
  stopoverStation.value = resp.data
}
</script>
<style scoped lang="scss">
.expend-content {
  display: flex;
  justify-content: flex-start !important;
  height: 22px;
  margin: 8px 16px 8px 48px;
  .money {
    width: 100px;
    color: rgb(252, 131, 2);
  }
}

::v-deep .el-table__row {
  height: 88px;
}
.el-table td.el-table__cell div {
  display: flex;
  justify-content: center;
}
.tag {
  display: flex;
  .tag-item {
    padding: 2px;
    border-radius: 2px;
    margin-right: 4px;
    font-size: 10px;
    font-weight: bold;
    height: 21px;
    display: flex;
    align-items: center;
  }
}
::v-deep .el-table__header {
  height: 77px;
  .cell {
    color: #fff;
    display: flex;
    justify-content: center;
  }
  th.el-table__cell.is-leaf {
    background-color: #379bd8;
  }
}
</style>
<style lang="scss">
.el-popover.el-popper {
  padding: 0;
}
.el-popper {
  padding: 0;
}
.my-custom-table {
  .el-table__header {
    height: 55px;
  }
  .el-table__row {
    height: 55px;
    .cell {
      display: flex;
      justify-content: center;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
    }
  }
}
</style>
